接下來 3 篇文章的目標是以 React + Redux + Webpack 的技術來完成 To-Do List 功能與 PWA，而內容會假設讀者已經熟悉 React, Redux 及 Webpack，會把重點放在如何實作，不會逐步講解基礎觀念。

1. 環境建置
   • 基本介紹(Intro/Install/Run)
   • 執行 React 專案前置作業
   • 打造可撰寫 JSX/ES6/ES7 的環境
   • Webpack 設定
2. 建立檔案架構與功能
   • 規劃 React + Redux 架構
   • 顯示待辦事項清單
   • 新增/修改/刪除待辦事項清單
3. 實作 PWA
   • 建立 Web App Manifest File
   • 新增 Service Worker

本篇為第 3 篇： 實作 PWA

今天終於做完 React + Redux 範例也搭配 Service Worker，讓 To-Do List 可以在離線的時候做瀏覽，但目前只能顯示 GET 資料，若要讓 POST、PUT、DELETE 等操作都能夠執行，必須還要實作 IndexedDB 等 API 來輔助儲存、做資料的處理。

但現在於離線的狀況，至少不會出現以下這個畫面了：

建立 Web App Manifest File

{
    "name": "PWA To-Do List with React/Redux",
    "short_name": "To-Do List",
    "start_url": ".",
    "icons": [{
        "src": "./assets/images/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    }, {
        "src": "./assets/images/icon-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
    }, {
        "src": "./assets/images/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    }, {
        "src": "./assets/images/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }],
    "background_color": "#707477",
    "theme_color": "#f2f2f2",
    "display": "standalone",
    "orientation": "portrait"
}

新增 Service Worker

步驟：

• 第 1 步 - 註冊 Service Worker：Registering the Service Worker
• 第 2 步 - 快取靜態檔案 - 設定：Setting up the Default Cache
• 第 3 步 - 刪除舊的 Cache 檔案，避免網站內容無法更新：Clearing Old Cache
• 第 4 步 - 透過 fetch 事件，回傳 Response：Handling Fetch Requests

實作 Service Worker，藉由 sw-precache、達成離線瀏覽：

待補充...